/* Copyright (C) 2019 Intel Corporation.  All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{% load static %}
<style>
#container{  
    position:relative;  
    margin:0px; 
    height:110px; 
}  
#content {  
    margin:0px 20% 0px 18%;  
    border:solid 1.5px; 
    border-color: white black white black;
    height:50%;  
}  
#mainnav{
     display:table;
     margin: 0 auto;
}
#mainnav li{
    display: table-cell;
    padding-left:10px;
}
#mainnav ul li a{
    width:120px;
    height:30px;
    background:black;
    color:white;
    margin:0px 50px;
    font-size:21px;
    font-family:'sansationlight';
    display:block;
    text-align:center;
    text-decoration:none;
}
#mainnav ul li a:hover{
    width:120px;
    height:33px;
    line-height:30px;
    border:solid 1.5px;  
    border-color: black black white black;
    color:#3FC3DF;
    background:black;
}
.headers{
    background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color:white;
    clear:both;    
    height:50%;
    text-align:center;
    padding:10px;
    margin:0px;
}
#maintitle{
    font-size:25px;
    font-family:'sansationlight';
}

#photo2{
    position: relative;
    float: left;
    top:10%;
    left:20%;
}
#devic{
    position: relative;
    font-size:22px;
    float: left;
    left:25%;
    top:30%;
    width:40%;
}
#dividebar{
    position: absolute;
    top:210px;
    margin:10px;
    width:100%;
    height:1px
}

#devices {
    position:relative;
    bottom: 2px;
    background-color: #F2F2F2;
    height:125px;
    width:80%;
    margin:8px 10%;
}
#section {
    position:relative;
    background-color:white;
    top:14px;
    left:13%;
    width: 70%;
    float:left;
    height:96px;
    border-style:double solid;
    border-color:black;
    border-width:0.5px;
    padding:10px;	 	 
}
#photo{
    position: relative;
    float: left;
    top:0px;
    left:6%;
}
#ID{
    position:relative;
    float:left;
    left:12%;
    height:20px;
    width:8%;
    top:75%;
    z-index:9999;
    /* display:none; */
    font-size:15px;
    color:rgba(7, 38, 85, 0.87);  
}
#IPs{
    position: relative;
    left: 14%;
    top:10%;
    width:30%;
    font-size:17px;
    font-family:'sansationlight';
}
#ports{
    position: relative;
    left: 14%;
    top:25%;
    bottom: 5px;
    width:30%;
    font-size:17px;
    font-family:'sansationlight';
}
#installs{
    position: relative;
    float: right;
    right: 20%;
    bottom:57%;
    font-size:17px;
    font-family:'sansationlight';
}
.smenu{
    position: relative;
    float: right;
    top:45px;
    right: 5%;
    width: 6%;
}

.prev{
    position:absolute;
    left:72%;
    clear:both;
    text-align:center;
    padding:1px;
    width:100px; 
    height:30px;
    color:grey;
    background-color:white;
    border-radius:5px;
    z-index: 996;	 
}

.next{
    position:absolute;
    left:80%;
    clear:both;
    text-align:center;
    padding:1px;
    width:100px; 
    height:30px;
    color:grey;
    background-color:white;
    border-radius:5px;
    z-index: 996;		 
}

.footer {
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:1px;
    width:100%; 
    height:4%;
    z-index: 999;	 	 
}
</style>
